<!--
 * @Author: hu_binbin
 * @Date: 2021-08-16 20:53:14
 * @LastEditTime: 2021-08-16 21:05:40
 * @Description: 任务列表内容项
-->
<template>
    <div class="tab-item">
        <div class="tab-icon">
            <div class="box3">熄灯巡视</div>
        </div>
        <div class="tab-title">
            <span>待安排</span>
            <label>东善桥变全面巡视</label>
            <van-tag style="margin-left: 1rem;" plain type="danger" color="#FB716D">标签</van-tag>
        </div>
        <div class="tab-sub">
            <span>交花园山变电站</span>
            <label>交流110kv</label>
        </div>
        <div class="tab-per tab-per-flex">
            <div class="flex-center">
                <!-- <van-image  :src="icon.screen" width="24" height="24"/> -->
                <van-icon size="18" name="user-circle-o" />
                <span style="margin-left: 5px;">巡视人：</span>
                <label>--</label>
            </div>
            <div class="flex-center">
                <span style="color:#FB716D">即将到期</span>
                <van-icon style="margin-left: 5px;" size="18" name="question-o" />
                <!-- <van-image  :src="icon.screen" width="24" height="24"/> -->
            </div>
        </div>
        <div class="tab-time" style="display: flex;">
            <!-- <van-image  :src="icon.screen" width="24" height="24"/> -->
            <van-icon size="18" name="underway-o" />
            <span style="margin-left: 5px;">巡视计划时间：</span>
            <label>2020/06/09 09:21</label>
        </div>
        <div style="display: flex;position: relative;justify-content: space-between">
            <van-button style="width: 35%;height: 32px;"  type="primary" size="small">接单</van-button>
            <div class="box4"></div>
            <div class="box5"></div>
            <van-button  style="width: 55%;;height: 32px;" type="primary" size="small">计划安排</van-button>
        </div>
        <div v-if="false" style="text-align: center;margin-top: 20px;">
            <van-button style="width: 100%;"  type="primary" size="small">计划安排</van-button>
        </div>
    </div>
</template>

<script>
export default {
    name:"taskListCont",
    props: {
        
    },
    data() {
        return {
            
        }
    },
    methods: {
        openTime() {

        },
        focus() {

        }
    },
};
</script>

<style scoped>
    .tab-item{
		padding: 20px 10px;
		background: #F9FCFC;
		margin-bottom: 10px;
		position: relative;
		overflow: hidden;
	}
	.tab-item .tab-content{
		font-size: 13px;
		color: #999;
		padding: 5px 0px;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
    .tab-sub{
		margin-bottom: 0.5rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
	}
    .tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
	
	.flex-center{
		display: flex;
		align-items: center;
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: rgb(220, 244, 240);
		color: rgb(14, 178, 149);
		font-weight: bold;
	}
	.box4{
		transform: rotate(180deg);
		position: absolute;
    	left: 30%;
		top: -1px;
		border-top: 0px solid rgba(0,0,0,0);
		border-right: 14px solid rgba(0,0,0,0);
		border-bottom: 32px solid #07C160;
		border-left: 14px solid rgba(0,0,0,0);
	}
	.box5{
		transform: translate(15px, 0px);
		border-top: 0px solid rgba(0, 0, 0, 0);
		border-right: 14px solid rgba(0, 0, 0, 0);
		border-bottom: 32px solid #07C160;
		border-left: 14px solid rgba(0, 0, 0, 0);
	}
</style>

